<template>
  <div class="filter-wrapper">
    <div class="filter-title">
        <span class="svg-box" @click="handleHiddenBox">
          <svg-icon icon-class="close" />
        </span>
      <span class="text">{{$t('home.filter')}}</span>
      <span>&nbsp;&nbsp;</span>
    </div>

    <div class="filter-container">
      <BtScroll
        class="filter-scroll"
        ref="userList"
        @scroll="scroll"
        @refresh="refresh"
        @beforeScroll="listScroll"
        :probe-type="probeType"
        :listenScroll="listenScroll"
        :pullingUp="pullingUp"
        :beforeScroll="beforeScroll">
        <div class="report-filter" v-show="reportFilter.length">
          <div v-for="(item, index) in reportFilter" :key="index" >

            <div class="process" v-show="item.FilterType === 0" >
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-input v-model="item.FilterValue" maxlength="20"></el-input>
              </p>
            </div>

            <div class="process" v-show="item.FilterType === 1">
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-input v-model="item.FilterValue" maxlength="20"></el-input>
              </p>
            </div>

            <!--时间-->
            <div  v-show="item.FilterType === 2"  class="process-time">
              <!--1=当天；2=本周；3=本月;4=本季度；5=本年度;-->
              <p class="item-name">{{$t('filter.time')}}</p>
              <div class="time-picker" v-if="item.FilterValue === '2'">
                <div  class="start-time">
                  <p>
                    <span >开始时间</span>
                  </p>
                </div>
                <div class="end-time">
                  <p>
                    <span >结束时间</span>
                  </p>
                </div>
              </div>
              <span class="error-msg" v-show="errorMsg">{{text}}</span>
            </div>

            <!--组织机构-->
            <div v-show="item.FilterType === 3" class="process-person">
              <div class="process-person-name-filter">
                <p class="process-person-name-filter-inner">{{item.DisplayName}}</p>
              </div>
              <p class="process-person-list-filter">
              <span class="svg-box">
                <svg-icon icon-class="right" />
              </span>
              </p>
            </div>

              <!--固定值 下拉-->
            <div class="process" v-show="item.FilterType === 4">
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-select v-model="selectValue4" placeholder="请选择">
                  <el-option
                    v-for="(inner, index) in item.FilterValue"
                    :key="index"
                    :label="index"
                    :value="inner">
                  </el-option>
                </el-select>
              </p>
            </div>

            <!--数据字典 下拉-->
            <div class="process" v-show="item.FilterType === 5">
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-select v-model="selectValue5" placeholder="请选择">
                  <el-option
                    v-for="(inner, index) in item.FilterValue"
                    :key="index"
                    :label="inner"
                    :value="inner">
                  </el-option>
                </el-select>
              </p>
            </div>

            <!--关联查询-->
            <div class="process" v-show="item.FilterType === 6">
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-input v-model="item.FilterValue" maxlength="20"></el-input>
              </p>
            </div>

            <!--单选-->
            <div v-show="item.FilterType === 7" class="process-status">
              <p class="item-name">{{item.DisplayName}}</p>
              <div class="status-list">
               <p class="select-tag" v-for="(inner, index) in item.FilterValue" :key="index">
                 <span>{{inner}}</span>
               </p>
              </div>
            </div>

            <!--流程模板 输入-->
            <div class="process" v-show="item.FilterType === 8">
              <p class="item-name">{{item.DisplayName}}</p>
              <p class="item-input">
                <el-input v-model="item.FilterValue" maxlength="20"></el-input>
              </p>
            </div>
          </div>
        </div>
        <div class="nodata" v-show="!reportFilter.length">
          <NoData></NoData>
        </div>
      </BtScroll>
    </div>

    <div class="filter-btm">
      <p class="reset" @click="handleReset">{{$t('filter.reset')}}</p>
      <p class="sure" @click="handleSearch">{{$t('filter.submit')}}</p>
    </div>
  </div>
</template>

<script>
import filterMixin from '@/commom/mixins/filterMixin'
import NoData from '@/components/NoData'
export default {
  name: 'FilterBox',
  mixins: [filterMixin],
  components: {
    NoData
  },
  data() {
    return {
      input: '',
      selectValue4: '',
      selectValue5: ''
    }
  },
  created() {
    console.log(this.reportFilter, 'filterData')
  },
  methods: {
    // close
    handleHiddenBox() {
      this.$emit('handleHiddenBox')
    },
    // 重置
    handleReset() {
      setTimeout(() => {
        this.$emit('handleSearchBox', null)
      }, 100)
    },
    // 确定
    handleSearch() {
      let arr = {}
      for (let item of this.reportFilter) {
        arr[item.DisplayName] = item.inputValue
      }
      this.$emit('handleSearchBox', arr)
    }
  },

  computed: {
    reportFilter() {
      return this.$store.getters.reportFilter
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "@/commom/scss/filterBox/index.scss";
  .report-filter{
    padding-bottom: 20px;
  }
  .nodata{
    width: 100%;
    height: 100%;
  }
  .select-tag{}
</style>
